<template>
	<view class="container">
		<view>
			<!-- 搜索框 -->
			<uni-search-bar cancelButton="none" :focus="true" placeholder="请输入歌手名称" v-model="searchValue"
				@confirm="search">
				<template v-slot:searchIcon>
					<uni-icons color="#00c273" size="18" type="search" />
				</template>
			</uni-search-bar>
		</view>

		<!-- 专辑列表: 使用Flex布局替代uni-grid -->
		<view v-if="albumList.length > 0" class="album-grid">
			<view class="album-item" v-for="(album, index) in albumList" :key="index">
				<view class="grid-item-box" @click="goAlbumDetail(album.id,album.name)">
					<image :src="album.coverImage" mode="aspectFill"></image>
					<view class="grid-info">
						<text class="text">{{album.name}}</text>
						<text class="text">{{album.artist}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 错误提示：专辑列表数据为空时显示 -->
		<view v-else class="empty-state">
			<text class="empty-text">暂无记录</text>
		</view>

	</view>
</template>

<script>
	export default {
		name: "DiscoverTabPage",
		data() {
			return {
				albumList: [], //用于储存专辑列表响应数据
				searchValue: "" //搜索关键词

			};
		},
		methods: {
			// 获取专辑数据
			getAlbumList() {
				uni.request({
					url: 'https://apifoxmock.com/m1/5460619-0-default/getAlbumList',
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.statusCode === 200) {
							this.albumList = res.data.data;
							// console.log('获取专辑列表成功: ', res.data);
						} else {
							console.error('获取专辑列表失败: ', res.message || '未知错误');
						}
					},
					fail: (err) => {
						console.error('请求失败: ', err);
					}
				});
			},
			// 搜索功能
			async search() {
				// 未输入搜索关键词
				if (!this.searchValue) {
					this.getAlbumList();
					return;
				}

				// 对搜索关键词进行URL编码
				const encodedKeyword = encodeURIComponent(this.searchValue);

				// 将输入的关键字keyword作为参数补充到请求路径中
				const response = await uni.request({
					url: `https://apifoxmock.com/m1/5460619-0-default/getAlbumByKeyword?keyword=${encodedKeyword}`,
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.data.statusCode === 200) {
							// 搜索成功,将搜索结果赋值给专辑列表数据albumList,从而重新渲染专辑列表
							this.albumList = res.data.data;
						} else if (res.data.statusCode === 400) {
							// 未找到符合结果的搜索数据,让专辑列表数据为空
							this.albumList = [];
						}
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			// 跳转到专辑详情页面
			goAlbumDetail(albumId, albumName) {
				uni.navigateTo({
					url: `/pages/album_detail/album_detail?id=${albumId}&name=${albumName}`
				});
			},
		},
		created() {
			this.getAlbumList();
		},
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.album-grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 10rpx;
			flex: 1;

			.album-item {
				width: 48%;
				margin-bottom: 20rpx;

				.grid-item-box {
					background: #fff;
					border-radius: 10rpx;
					overflow: hidden;
					box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

					image {
						width: 100%;
						height: 300rpx;
					}

					.grid-info {
						padding: 20rpx;

						.text {
							display: block;
							font-size: 28rpx;
							margin-bottom: 8rpx;

							&:first-child {
								font-weight: bold;
								color: #333;
							}

							&:last-child {
								color: #666;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}

		.empty-state {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.empty-text {
				font-size: 32rpx;
				color: #999;
				font-weight: bold;
			}
		}
	}
</style>
</style>